<!-- 主入口 -->
<template>
  <div>
    <!-- 头部 -->
    <Header :topTitle="routePath" v-if="this.$route.path !='/'"></Header>
    <transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')">
      <router-view class="transitionBody" v-if="!$route.meta.keepAlive" :style="{paddingTop:$route.path=='/'?0+'px':46+'px'}"></router-view>
      <keep-alive>
        <router-view class="transitionBody" v-if="$route.meta.keepAlive" :style="{paddingTop:$route.path=='/'?0+'px':46+'px'}"></router-view>
      </keep-alive>
    </transition>
    <van-tabbar v-if="$route.path =='/index' || $route.path =='/userIndex' || $route.path == '/articleList' ">
      <van-tabbar-item :class="{orange:$route.path =='/index'}" name="wap-home" icon="wap-home" @click="$router.push('/index')">首页</van-tabbar-item>
      <van-tabbar-item :class="{orange:$route.path =='/articleList'}" name="comment" icon="comment" @click="$router.push('/articleList')">咨讯
      </van-tabbar-item>
      <van-tabbar-item :class="{orange:$route.path =='/userIndex'}" name="manager" icon="manager" @click="$router.push('/userIndex')">我的
      </van-tabbar-item>
    </van-tabbar>
  </div>

</template>
<script>
import { mapState, mapActions } from 'vuex'
import Header from 'mobile/common/Header'
export default {
  components: { Header },
  data () {
    return {
      arrTab: ['/index', '/', '/userIndex'],
    }
  },
  methods: {
    //安卓热更新
    updateApp () {
      plus.runtime.getProperty(plus.runtime.appid, function (inf) {
        // 当前版本
        var wgtVersion = inf.version;
        mui.ajax("https:// houtai.com", {
          data: {},
          dataType: 'json',
          type: 'get',
          success: function (data) {
            // 如果有新版本，则提示需要更新
            if (data.version > wgtVersion) {
              mui.confirm('检查更新', '发现新版本，是否更新', ['确定', '取消'], function (e) {
                if (e.index == 0) {
                  this.downloadWgt(); // 下载wgt方法
                } else {
                  return;
                }
              })
            } else {
              return;
            }
          },
          error: function (err) {
          }
        });
      });
    },
    downloadWgt () {
      var that = this;
      // 更新文件 wgt 文件地址
      var wgtUrl = "http://192.168.0.156/H503A1250.wgt";
      plus.nativeUI.showWaiting("正在更新...");
      plus.downloader.createDownload(wgtUrl, { filename: "_doc/update/" }, function (d, status) {
        if (status == 200) {
          console.log("下载wgt成功：" + d.filename);
          that.installWgt(d.filename); // 安装wgt方法
        } else {
          console.log("下载wgt失败！");
          plus.nativeUI.alert("下载wgt失败！");
        }
        plus.nativeUI.closeWaiting();
      }).start();
    },
    installWgt (path) {
      plus.nativeUI.showWaiting("安装wgt文件...");
      plus.runtime.install(path, {}, function () {
        plus.nativeUI.closeWaiting();
        console.log("安装wgt文件成功！");
        plus.nativeUI.alert("应用资源更新完成！", function () {
          plus.runtime.restart();
        });
      }, function (e) {
        plus.nativeUI.closeWaiting();
        console.log("安装wgt文件失败[" + e.code + "]：" + e.message);
        plus.nativeUI.alert("安装wgt文件失败[" + e.code + "]：" + e.message);
      });
    },
  },
  mounted () {
    //监听安卓手机左滑后退事件
    this.mui.plusReady(() => {
      if (this.$route.path == '/index') {
        //判断是苹果还是安卓
        if (this.mui.os.ios) {

        } else {
          // this.updateApp()
        }

      }
      var backcount = 0;
      this.mui.back = () => {
        let path = this.$route.path;
        if (this.arrTab.includes(path)) {
          // 主导航页
          if (this.mui.os.ios) return;
          if (backcount > 0) {
            if (window.plus) plus.runtime.quit();
            return;
          };
          this.$toast({ message: '再按一次退出蜜蜂钱包', position: 'bottom' });
          // plus.nativeUI.toast('再按一次退出蜜蜂钱包');
          backcount++;
          setTimeout(() => {
            backcount = 0;
          }, 2000);
        } else {
          // 子页面
          this.$router.go(-1);
        }
      };
    })
  },
  computed: mapState({
    direction: state => state.mutations.direction,
    routePath () {
      return this.$route.name
    }
  }),
  // watch:{
  // 	'$route'(to){
  // 		let getCookies = this.$cookies.get('token')
  // 		if(getCookies){
  // 			this.$cookies.set('token',getCookies,24 * 60 * 60)
  // 		}
  // 	}
  // }
}
</script>
<style>
.transitionBody {
  width: 100%;
  animation-duration: 0.4s;
  animation-fill-mode: both;
  backface-visibility: hidden;
}
.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  will-change: transform;
  height: 100%;
  position: absolute;
  left: 0;
}
.vux-pop-out-enter-active {
  animation-name: popInLeft;
}

.vux-pop-out-leave-active {
  animation-name: popOutRight;
}

.vux-pop-in-enter-active {
  perspective: 1000;
  animation-name: popInRight;
}

.vux-pop-in-leave-active {
  animation-name: popOutLeft;
}

@keyframes popInLeft {
  from {
    opacity: 0;
    transform: translate3d(-80%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes popOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-80%, 0, 0);
  }
}

@keyframes popInRight {
  from {
    opacity: 0;
    transform: translate3d(80%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes popOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(80%, 0, 0);
  }
}
</style>
